-
Notifications
You must be signed in to change notification settings - Fork 153
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add scroll shadow to #multipage-nav
wrapper for overflowing screens
#12559
Add scroll shadow to #multipage-nav
wrapper for overflowing screens
#12559
Conversation
…-it' of github-mf:MozillaFoundation/foundation.mozilla.org into TP1-175-secondary-menu-cuts-off-if-there-s-too-many-nav-it
Thanks @ramram-mf, adding @nancyt1 for a design review as well! Nancy, what do you think about this treatment of a horizontal scroll in response to #10858? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code approved @ramram-mf! Ideally our plan is to move away from using .scss, but we may have to for this element since it's still using it and a full refactor of the element seems out of scope for this issue.
Please hold off on merging until Nancy takes a look. Thanks!
@ramram-mf @robdivincenzo Can this be a white gradient instead? or a lighter grey if white doesn't look right? |
@nancyt1 due to how this solution is structured, doing a white gradient is not viable since hiding the gradient is achieved by overlaying a white layer on top of it, we can try a lighter gray easily but to test a white gradient we would need to pivot our approach to a javascript based one. I will be submitting the lighter gray variant in a moment for you guys to review. |
@ramram-mf This page on the category pill buttons has an example of what I mean with the white gradient. Is that solution feasible in this context? |
If I'm understanding this a bit better- it sounds like to do the white gradient, we will lose the disappear / reappear gradient effect. But since we prefer the design to be consistent with the rest of the site, so we should continue to mimic the white gradient example that @nancyt1 linked. My 2 cents- I'm ok with losing the additional effects to opt for consistency (even though they're really nice!). And I agree with @ramram-mf that we shouldn't pivot to JS. |
I've implemented the suggested feature aiming for consistency this time, with white gradients. It does lack the left gradient just as in the reference due to the constraints of tailwind utility classes. It currently fails to let the user know that there are more elements out of view from the scrolling area because of specific content layout, since there are no overflowing elements that positioned are in the container boundaries at load time. 64px of white gradient to the right, reference had 24px I'm not convinced this would help (as is) user experience. Would love to hear your thoughts on the matter @nancyt1 @robdivincenzo. |
…-it' of github-mf:MozillaFoundation/foundation.mozilla.org into TP1-175-secondary-menu-cuts-off-if-there-s-too-many-nav-it
@ramram-mf Actually, talking about this further at crit, we were thinking the better solution for now is just stacking the elements into 2 rows like mozilla festival has it. This will allow all links to be visible at once and doesn't need anything fancy. Would that work? |
Description
This PR attempts to mitigate the overflowing wrapping layout of secondary navigation for non mobile screens by adding a scroll shadow feature to the container, which displays a subtle shadow on the sides where overflowing elements are present.
Current state:
Fixed state:
Link to sample test page: https://foundation-s-tp1-175-se-pxywdd.herokuapp.com/en/what-we-fund/
Related PRs/issues: #10858
┆Issue is synchronized with this Jira Story